<template>
	<view class="container">
		<u-sticky customNavHeight="0">
			<view class="tabs">
				<u-tabs :list="tabs" :current="tabIndex" lineColor="#F4F4F4" :itemStyle="{height:'96rpx',padding:'0 40rpx',fontWeight:'600'}" :inactiveStyle="{fontSize:'28rpx',color:'#666666'}" :activeStyle="{fontSize:'30rpx',color:'#4179FF'}" @click="tabClick"></u-tabs>
			</view>
		</u-sticky>
		<view class="order_list">
			<block v-for="(item, index) in orderList" :key="item.orderNo">
				<view class="order_item" :data-index="index" :data-no="item.orderNo" @click="setOrderInfo">
					<view class="u-flex u-flex-items-center item_head">
						<view class="amount Medium">¥{{item.orderMoney}}</view>
						<u-tag size="mini" :text="item.type==101?'收顾客':'收店面'" :plain="true" color="#666666" borderColor="#DDDDDD"></u-tag>
						<view class="u-flex u-flex-items-center u-margin-left-auto">
							<text class="order_status" :class="[colorObject(item.status)]">{{initState(item.status)}}</text>
							<u-icon size="16" color="#999999" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="u-flex item_info">
						<text class="name">{{item.type==101?'收款顾客':'收款店面'}}：</text>
						<text class="content">{{item.type==101?item.customerName:item.storeName}}</text>
					</view>
					<view v-if="item.type==101" class="u-flex item_info">
						<text class="name">收款活动：</text>
						<view class="content">
							<text>{{item.storeName}}</text>
							<text style="margin-left: 40rpx;">{{item.activityStartTime?item.activityStartTime.substring(0, 10):''}}</text>
						</view>
					</view>
					<view class="u-flex item_info">
						<text class="name">收款时间：</text>
						<text class="content">{{item.createTime}}</text>
					</view>
				</view>
			</block>
		</view>
		<u-popup :show="termShow" mode="center" :safeAreaInsetBottom="false" :customStyle="{borderRadius:'16rpx'}" @close="termClose">
			<view class="term">
				<view class="term_title Medium">请选择收款方式</view>
				<view class="u-flex u-flex-items-center term_item" :data-orderNo="orderNo" @click="qrCodePay">
					<uni-icons size="28" color="#666666" custom-prefix="iconfont" type="icon-erweima"></uni-icons>
					<view class="term_info">
						<view class="name">扫码支付</view>
						<view class="content">展示二维码，对方扫码进行付款</view>
					</view>
					<u-icon size="16" color="#999999" name="arrow-right"></u-icon>
				</view>
				<u-line color="#DDDDDD" length="464rpx" margin="auto"></u-line>
				<view class="u-flex u-flex-items-center term_item" :data-orderNo="orderNo" @click="bankCardPay">
					<uni-icons size="28" color="#666666" custom-prefix="iconfont" type="icon-shuaka"></uni-icons>
					<view class="term_info">
						<view class="name">转账支付</view>
						<view class="content">展示转账信息，对方转账进行付款</view>
					</view>
					<u-icon size="16" color="#999999" name="arrow-right"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { selectHistoryOrCurrentOrder, getOrderDetail } from '@/config/api.js';
	export default {
		data() {
			return {
				tabs: [{
					name: '当前订单',
				}, {
					name: '历史订单',
				}],
				tabIndex: 0,
				termShow: false,
				orderNo: '', //订单号
				orderIndex: null, //订单索引
				orderList: [], //订单列表
				token: '',
				storeId: '',
				activityDayId: '',
				customerInviteId: '',
				isCurrentOrder: '',
				page: 1,
				limit: 20
			};
		},
		onLoad(options) {
			var that = this;
			let token = options.token;
			if (uni.$u.test.isEmpty(token) === false) {
				that.type = options.type;
				that.token = options.token;
				that.storeId = options.storeId || '';
				that.activityDayId = options.activityId || '';
				that.customerInviteId = options.customerInviteId || '';
				that.getOrderList('init');
			}
		},
		onShow() {
			var that = this;
			let token = that.token;
			if (uni.$u.test.isEmpty(token) === false) {
				that.initList();
				that.getOrderList('init');
			}
		},
		onPullDownRefresh() {
			var that = this;
			that.initList();
			that.getOrderList('init');
		},
		onReachBottom() {
			var that = this;
			that.getOrderList('loadmore');
		},
		methods: {
			colorObject(status) {
				let color = '';
				switch (status) {
					case 100:
						color = 'color_4179FF'
						break;
					case 101:
						color = 'color_00C25F'
						break;
					case 102:
						color = 'color_888888'
						break;
					case 105:
						color = 'color_F26809'
						break;
					case 106:
						color = 'color_4179FF'
						break;
					case 107:
						color = 'color_4179FF'
						break;
					default:
						color = '';
				}
				return color;
			},
			initState(state) {
				let result = '';
				switch (state) {
					case 100:
						result = '待支付'
						break;
					case 101:
						result = '支付成功'
						break;
					case 102:
						result = '已过期'
						break;
					case 105:
						result = '已退款'
						break;
					case 106:
						result = '待支付'
						break;
					case 107:
						result = '待支付'
						break;
					default:
						result = '-';
				}
				return result;
			},
			tabClick(e) {
				var that = this;
				that.tabIndex = e.index;
				that.initList();
				that.getOrderList('init');
			},
			termOpen() {
				this.termShow = true;
			},
			termClose() {
				this.termShow = false;
			},
			setOrderInfo(e) {
				var that = this;
				that.orderNo = e.currentTarget.dataset.no;
				that.orderIndex = e.currentTarget.dataset.index;
				if (uni.$u.test.isEmpty(that.orderNo)) {
					return uni.$u.toast('无效的订单，请联系管理员');
				}
				getOrderDetail({
					token: that.vuex_token,
					orderNo: that.orderNo
				}).then(res => {
					let status = res.data.status;
					let qrcode = res.data.qrCode;
					let bank = res.data.bank;
					that.orderList[that.orderIndex].status = status;
					switch (status) {
						case 100:
							that.termOpen();
							break;
						case 101:
							uni.$u.route({
								url: '/pages/refund/detailsPaySuccess/detailsPaySuccess',
								params: {
									orderNo: that.orderNo
								}
							});
							break;
						case 102:
							uni.$u.toast(`订单已过期，请重新发起收款`);
							break;
						case 103:
							uni.$u.toast(`订单支付失败，请重新发起收款`);
							break;
						case 104:
							uni.$u.toast(`订单关闭，请重新发起收款`);
							break;
						case 105:
							uni.$u.route({
								url: '/pages/refund/detailsPaySuccess/detailsPaySuccess',
								params: {
									orderNo: that.orderNo
								}
							});
							break;
						case 106:
							that.termOpen();
							break;
						case 107:
							if (uni.$u.test.isEmpty(qrcode) === false) {
								// 易宝二维码方式已下单，且未支付
								uni.$u.route({
									url: '/pages/qrcode_payment/qrcode_payment',
									params: {
										orderNo: that.orderNo,
										status: 'created',
										payInfo: JSON.stringify(qrcode)
									}
								});
							} else if (uni.$u.test.isEmpty(bank) === false) {
								// 易宝转账方式已下单，且未支付
								uni.$u.route({
									url: '/pages/transfer_payment/transfer_payment',
									params: {
										orderNo: that.orderNo,
										status: 'created',
										payInfo: JSON.stringify(bank)
									}
								});
							} else {
								uni.$u.toast(`未支持的付款方式`);
							}
							break;
						default:
							uni.$u.toast(`未知错误，请联系管理员`);
					}
				}).catch(err => {
					console.log('getOrderDetail=', err);
				});
			},
			getOrderList(status) {
				var that = this;
				let page = status == 'loadmore' ? that.page + 1 : 1;
				let params = {
					token: that.vuex_token,
					type: that.type,
					storeId: that.storeId,
					activityId: that.activityDayId,
					isCurrentOrder: that.tabIndex === 0 ? 100 : 101,
					customerInviteId: that.customerInviteId,
					pageNum: page,
					pageSize: that.limit
				};
				selectHistoryOrCurrentOrder(params).then(res => {
					if (res.data.rows.length > 0) {
						that.page = page;
						if (status == 'init') {
							that.orderList = res.data.rows;
						} else if (status == 'loadmore') {
							that.orderList = that.orderList.concat(res.data.rows);
						}
					} else {
						uni.$u.toast(res.msg);
					}
					uni.stopPullDownRefresh();
				}).catch(err => {
					console.log('selectHistoryOrCurrentOrder=', err);
					uni.stopPullDownRefresh();
				});
			},
			qrCodePay() {
				var that = this;
				that.termClose();
				uni.$u.route({
					url: '/pages/qrcode_payment/qrcode_payment',
					params: {
						orderNo: that.orderNo,
						status: 'uncreated'
					}
				});
			},
			bankCardPay() {
				var that = this;
				that.termClose();
				uni.$u.route({
					url: '/pages/transfer_payment/transfer_payment',
					params: {
						orderNo: that.orderNo,
						status: 'uncreated'
					}
				});
			},
			initList() {
				var that = this;
				that.page = 1;
				that.orderList = [];
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;

		.container {
			min-height: 100vh;

			.tabs {
				background-color: #F4F4F4;
			}

			.order_list {
				padding: 0 20rpx;

				.order_item {
					background: #FFFFFF;
					padding: 0 20rpx 20rpx;
					border-radius: 16rpx;
					margin-bottom: 20rpx;

					.item_head {
						padding-top: 48rpx;
						margin-bottom: 32rpx;

						.amount {

							font-size: 40rpx;
							color: #333333;
							margin-right: 20rpx;
						}

						.order_status {
							
							font-size: 28rpx;
							margin-right: 6rpx;
						}

						.color_4179FF {
							color: #4179FF;
						}

						.color_F26809 {
							color: #F26809;
						}

						.color_00C25F {
							color: #00C25F;
						}

						.color_888888 {
							color: #888888;
						}
					}

					.item_info {
						margin-bottom: 28rpx;

						.name {
							
							font-size: 28rpx;
							color: #888888;
							white-space: nowrap;
						}

						.content {
							flex: 1;
							max-width: 520rpx;
							
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
			}

			.term {
				width: 560rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.term_title {

					font-size: 34rpx;
					color: #333333;
					line-height: 38rpx;
					text-align: center;
					padding-top: 48rpx;
					margin-bottom: 20rpx;
				}

				.term_item {
					padding: 40rpx 0;
					margin: 0 48rpx;

					.term_info {
						flex: 1;
						margin: 0 0 0 20rpx;

						.name {
							
							font-size: 28rpx;
							color: #333333;
							line-height: 32rpx;
							margin-bottom: 10rpx;
						}

						.content {
							
							font-size: 24rpx;
							color: #999999;
							line-height: 28rpx;
						}
					}
				}
			}
		}
	}
</style>